<template>
  <div class="base">
    <div class="left">
      <div class="menu" v-for="item in menus" @click="toPage(item.page)">{{ item.name }}</div>
    </div>
    <div class="right">
      <div class="top">
        <div class="flex top1">
          <div class="title1">学号</div>
          <el-input v-model="form3.studentID" aria-placeholder="请输入学号" autocomplete="off"></el-input>
        </div>
        <el-button type="primary" class="but1" @click="search">查询</el-button>
        <el-button type="primary" class="but1" @click="addstu">新增</el-button>
      </div>
      <div class="bottom" style="width: 100%">
        <el-table class="content1" :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="studentID" label="学号" :width="width">
          </el-table-column>
          <el-table-column prop="phoneNumber" label="手机号" :width="width">
          </el-table-column>
          <el-table-column prop="firstName" label="姓" :width="width">
          </el-table-column>
          <el-table-column prop="lastName" label="名" :width="width">
          </el-table-column>
          <el-table-column prop="dateOfBirth" label="生日" :width="width">
          </el-table-column>
          <el-table-column prop="gender" label="性别" :width="width">
            <template slot-scope="scope">
              <div v-if="scope.row.gender == 'Male'">男</div>
              <div v-if="scope.row.gender == 'Female'">女</div>
              <div v-if="scope.row.gender == 'Other'">其他</div>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮件" :width="width">
          </el-table-column>
          <el-table-column prop="address" label="地址" :width="width">
          </el-table-column>
          <el-table-column prop="city" label="城市" :width="width">
          </el-table-column>
          <el-table-column prop="state" label="状态" :width="width">
            <template slot-scope="scope">
              <div v-if="scope.row.state == 1">正常</div>
              <div v-if="scope.row.state == 0">异常</div>
            </template>
          </el-table-column>
          <el-table-column prop="country" label="国家" :width="width">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" :width="width">
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" :width="width">
          </el-table-column>
          <el-table-column prop="tableData" fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" size="small">查看</el-button>
              <el-button @click="edit(scope.row)" size="small">编辑</el-button>
              <el-button @click="remov(scope.row)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="page">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>


      </div>
    </div>


    <!-- 新增窗口 -->
    <el-dialog title="新增学生" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.PhoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓氏" :label-width="formLabelWidth">
          <el-input v-model="form.FirstName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名" :label-width="formLabelWidth">
          <el-input v-model="form.LastName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.Email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.Address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市" :label-width="formLabelWidth">
          <el-input v-model="form.City" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="国家" :label-width="formLabelWidth">
          <el-input v-model="form.Country" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.Gender" placeholder="请选择性别">
            <el-option label="男" value="Male"></el-option>
            <el-option label="女" value="Female"></el-option>
            <el-option label="其他" value="Other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.State" placeholder="请选择状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="异常" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生年月" :label-width="formLabelWidth">
          <!-- <span class="demonstration">出生年月</span> -->
          <el-date-picker v-model="form.DateOfBirth" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addstu1">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑窗口 -->
    <el-dialog title="编辑学生" :visible.sync="dialogFormVisible1">
      <el-form :model="form1" ref="form1">
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form1.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="姓氏" :label-width="formLabelWidth">
          <el-input v-model="form1.firstName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名" :label-width="formLabelWidth">
          <el-input v-model="form1.lastName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form1.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form1.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="城市" :label-width="formLabelWidth">
          <el-input v-model="form1.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="国家" :label-width="formLabelWidth">
          <el-input v-model="form1.country" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form1.gender" placeholder="请选择性别">
            <el-option label="男" value="Male"></el-option>
            <el-option label="女" value="Female"></el-option>
            <el-option label="其他" value="Other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form1.state" placeholder="请选择状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="异常" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生年月" :label-width="formLabelWidth">
          <!-- <span class="demonstration">出生年月</span> -->
          <el-date-picker v-model="form1.dateOfBirth" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog title="学生详情" :visible.sync="dialogFormVisible2">
      <el-form :model="form2" ref="form2">
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form2.phoneNumber" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="姓氏" :label-width="formLabelWidth">
          <el-input v-model="form2.firstName" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="名" :label-width="formLabelWidth">
          <el-input v-model="form2.lastName" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form2.email" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form2.address" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="城市" :label-width="formLabelWidth">
          <el-input v-model="form2.city" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="国家" :label-width="formLabelWidth">
          <el-input v-model="form2.country" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select disabled v-model="form2.gender" placeholder="请选择性别">
            <el-option label="男" value="Male"></el-option>
            <el-option label="女" value="Female"></el-option>
            <el-option label="其他" value="Other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select disabled v-model="form2.state" placeholder="请选择状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="异常" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生年月" :label-width="formLabelWidth">
          <!-- <span class="demonstration">出生年月</span> -->
          <el-date-picker disabled v-model="form2.dateOfBirth" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

export default {
  data() {
    return {
      total: 0,
      currentPage4: 1,
      pageSize: 10,
      width: 110,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      form: {},
      form1: {},
      form2: {},
      form3: {},
      formLabelWidth: '120px',

      tableData: [],
      menus: [
        { name: '学生管理', page: '/stu' },
        { name: '数据大屏', page: '/data1' },
        { name: '新增学生', page: '/student' },
        { name: '上传文件', page: '/upload' },
        { name: '视频演示', page: '/video' },
        { name: '我的页面', page: '/my' },
        { name: '退出登陆', page: '/' },
      ],
      para: {
        "PhoneNumber": "13333333333",
        "FirstName": "谷",
        "LastName": "阳",
        "DateOfBirth": "2000-01-01",
        "Gender": "Female",
        "Email": "123213@qq.com",
        "Address": "建新东路201号",
        "City": "重庆",
        "State": "1",
        "Country": "中国"
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.search()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val
      this.search()
    },
    edit(row) {
      this.form1 = JSON.parse(JSON.stringify(row));
      console.log('row======', this.form1);
      this.dialogFormVisible1 = true
    },
    update() {
      console.log('form1', this.form1);
      this.$axios.post('http://localhost:8080/students/update', this.form1,
        {
          headers: {
            'token': localStorage.getItem('token'),
            'Content-Type': 'application/json'
          }
        })
        .then(response => {
          console.log('response', response);
          if (response.data.errorMsg) {
            this.$message.error(response.data.errorMsg);
          } else {
            console.log('111111');
            this.$message.success('修改成功');
            this.search()
            this.dialogFormVisible1 = false
          }
        })
        .catch(error => {
          console.log('error', error);
        });
    },
    remov(student) {
      console.log('user===>', student);
      this.$axios.post('http://localhost:8080/students/remov', {
        'StudentID': student.studentID
      },
        {
          headers: {
            'token': localStorage.getItem('token'),
            'Content-Type': 'application/json'
          }
        })
        .then(response => {
          console.log('response', response);
          if (response.data.errorMsg) {
            this.$message.error(response.data.errorMsg);
          } else {
            console.log('111111');
            this.$message.success('删除成功');
            this.search()
          }
        })
        .catch(error => {
          console.log('error', error);
        });

    },
    toPage(page) {
      console.log('topage', page);
      if (page == '/') {
        this.$router.replace(page);
      } else {
        this.$router.push(page);
      }
    },
    addstu() {
      this.dialogFormVisible = true
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    addstu1() {
      console.log('this.form.DateOfBirth', this.form.DateOfBirth);
      this.form.DateOfBirth = this.formatDate(this.form.DateOfBirth)
      this.$axios.post('http://localhost:8080/students/addStu', this.form,
        {
          headers: {
            'token': localStorage.getItem('token'),
            'Content-Type': 'application/json'
          }
        })
        .then(response => {
          console.log('response', response);
          if (response.data == null || response.data == '') {
            this.$message.error('添加失败');
          } else {
            console.log('111111');
            this.$message.success('添加成功');
            this.dialogFormVisible = false
          }
        })
        .catch(error => {
          console.log('error', error);
        });

    },
    // fetchStudents: function () {
    //   this.$axios.get('http://localhost:8080/students/a1List',
    //     {
    //       headers: {
    //         'token': localStorage.getItem('token'),
    //         'Content-Type': 'application/json'
    //       }
    //     })
    //     .then(response => {
    //       console.log('response', response);
    //       if (response.data == null || response.data == '') {
    //         this.$message.error('获取数据失败');
    //       } else {
    //         console.log('111111');
    //         this.tableData = response.data
    //         console.log('response.data.length()',response.data.length);
    //         this.totle = response.data.length
    //         this.$message.success('获取数据成功');
    //       }
    //     })
    //     .catch(error => {
    //       console.log('error', error);
    //     });
    // },
    search: function () {
      if (this.form3.studentID == '') {
        this.form3 = {}
      }
      this.form3.currentPage4 = this.currentPage4
      this.form3.pageSize = this.pageSize

      // currentPage4: 1,
      // pageSize: 10,
      this.$axios.post('http://localhost:8080/students/search', this.form3,
        {
          headers: {
            'token': localStorage.getItem('token'),
            'Content-Type': 'application/json'
          }
        })
        .then(response => {
          console.log('response', response);
          // if (response.data == null || response.data == '') {
          //   this.$message.error('获取数据失败');
          // } else {
          console.log('111111');
          this.tableData = response.data.rows
          console.log('response.data.records.length', response.data.rows.length);
          this.total = response.data.total
          this.$message.success('查询成功');
          window.scrollTo(0, 0)
          // }
        })
        .catch(error => {
          console.log('error', error);
        });
    },
    handleClick(row) {
      console.log(row);
      this.form2 = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible2 = true
    },
  },
  mounted: function () {
    this.search()

  },
}
</script>
<style scoped>
.content1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: scroll;
}

.flex {
  display: flex;
}

.page {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top1 {
  height: 100px;
  display: flex;
  align-items: center;
}

.base {
  display: flex;
  flex-direction: row;
}

.title1 {
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 98vh;
  background-color: beige;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu {
  margin-top: 20px;
}

.right {
  margin-left: 200px;
  height: 98vh;
  width: 100px;
  flex: 2;
  display: flex;
  flex-direction: column;
  /* background-color: aqua; */
}

.top {
  display: flex;
  align-items: center;
  height: 100px;
  width: 100%;
  background-color: aliceblue;
}

.but1 {
  margin-left: 20px;
}

.bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* overflow-y: scroll; */
}
</style>